{% assign data = section.settings %}

{% assign blockId = block_id | default : section.block_id %}

<div class="block_video_image_text" id="block_video_image_text-{{blockId}}">
  <div class="container_wrapper">
    <div class="content grid md:grid-cols-2 grid-cols-1 {{data.vedio_position}}" style="--radius: {{data.radius}}px;--bg: {{data.bg_color}};--text-color: {{data.text_color}};--btn-color: {{data.btn_color}};--btn-bg: {{data.btn_bg}};">
      <div class="text_box flex items-center">
        <div class="text_content">
          {% if data.title != '' %}
            <div class="title_box public_title">{{data.title}}</div>
          {% endif %}
          {% if data.detail != '' %}
            <div class="detail_box mt-5">{{data.detail}}</div>
          {% endif %}
          {% if data.btn_text != '' %}
            <div class="btn_wrap mt-8">
              <a class="public_btn btn_anime" href="{{data.link | setUrlDataFrom:data_from}}">
                {{data.btn_text}}
              </a>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="video_box relative">
        {% if data.video_url.model != '' %}
          <div id="iframe_{{blockId}}"></div>
        {% endif %}
        <div class="my_video_empty absolute w-full h-full left-0 top-0 z-10">
          {% include 'lazy_img',src: data.video_image_mask.src, alt: data.video_image_mask.alt, file_type: 'banner' %}
          <span class="video_play_btn flex items-center justify-center absolute" id="video_play_btn-{{blockId}}">
            {% include 'svg',svg: 'video_play_icon' %}
            {{data.play_btn_text}}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {
    moi.youtubeVideoPlay(`iframe_{{blockId}}`, {
      height: $(`#block_video_image_text-{{blockId}}`).height(),
      width: $(`#block_video_image_text-{{blockId}} .video_box`).width(),
      videoId: "{{section.settings.video_url.id}}",
      playerVars: {
        'controls': 1,
        'autoplay': 0,
        'disablekb': 0,
        'fs': 1,
        'iv_load_policy': 3,
        'modestbranding': 1,
        'rel': 0,
        'showinfo': 0
      },
      events: {
        onReady: function(event) {
          $(`#video_play_btn-{{blockId}}`).on('click', function() {
            $(`#block_video_image_text-{{blockId}} .video_box`).addClass('play_video');
            event.target.playVideo();
          })
        }
      },
      onError: function(event) {
        console.log(event)
      }
    })
  })
</script>
{% schema %}
  {
    "class": "block_video_image_text",
    "is_global": false,
    "icon": "icon-shipin",
    "name": {
      "zh_CN": "视频图文",
      "en_US": "Video text"
    },
    "blocks": [],
    "settings": [
      {
        "type": "card_header",
        "label": {
          "zh_CN": "设置",
          "en_US": "Settings"
        }
      },
      {
        "type": "card_slider",
        "label": {
          "zh_CN": "圆角"
        },
        "id": "radius",
        "max": 50,
        "min": 0,
        "unit": "px",
        "default": 30
      },
      {
        "type": "card_input",
        "label": {
          "zh_CN": "标题",
          "en_US": "Title"
        },
        "default": "",
        "id": "title"
      },
      {
        "type": "card_text_editor",
        "label": {
          "zh_CN": "描述",
          "en_US": "Description"
        },
        "id": "detail",
        "default": ""
      }, {
        "type": "card_input",
        "label": {
          "zh_CN": "按钮文字",
          "en_US": "Button text"
        },
        "default": "",
        "id": "btn_text"
      }, {
        "type": "card_page_link",
        "label": {
          "zh_CN": "跳转链接",
          "en_US": "Jump links"
        },
        "default": {
          "type": "",
          "title": "",
          "url": ""
        },
        "id": "link"
      }, {
        "type": "card_video",
        "error": {
          "zh_CN": "输入地址错误",
          "en_US": "Wrong address entered"
        },
        "rule": ["youtube"],
        "label": {
          "zh_CN": "视频链接",
          "en_US": "Video link"
        },
        "placeholder": {
          "zh_CN": "请输入Youtube视频的URL",
          "en_US": "Please enter the URL of the Youtube video"
        },
        "info": {
          "zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX",
          "en_US": "Only support Youtube, please enter the complete links such as: https://www.youtube.com/watch?v=XXXXXX"
        },
        "id": "video_url"
      }, {
        "type": "card_image",
        "label": {
          "zh_CN": "视频浮层图片",
          "en_US": "Video floating layer image"
        },
        "default": {
          "src": "",
          "alt": ""
        },
        "info": {
          "zh_CN": "尺寸建议：宽高1000*800px",
          "en_US": "Size suggestion: Width and height 1000*800px"
        },
        "id": "video_image_mask"
      }, {
        "type": "card_select",
        "label": {
          "zh_CN": "视频位置"
        },
        "default": "left",
        "id": "vedio_position",
        "option": [
          {
            "label": {
              "zh_CN": "居左",
              "en_US": "To the left"
            },
            "value": "left"
          }, {
            "label": {
              "zh_CN": "居右",
              "en_US": "To the right"
            },
            "value": "right"
          }
        ]
      }, {
        "type": "card_input",
        "label": {
          "zh_CN": "播放按钮文字"
        },
        "id": "play_btn_text",
        "default": "Play the video"
      }, {
        "type": "card_header",
        "label": {
          "zh_CN": "颜色设置",
          "en_US": "Color Settings"
        }
      }, {
        "type": "card_color",
        "id": "bg_color",
        "label": {
          "zh_CN": "背景颜色",
          "en_US": "Background color"
        },
        "default": "#fdf9ee"
      }, {
        "type": "card_color",
        "id": "text_color",
        "label": {
          "zh_CN": "文本颜色",
          "en_US": "Text color"
        },
        "default": "#000"
      }, {
        "type": "card_color",
        "id": "btn_color",
        "label": {
          "zh_CN": "按钮文字颜色",
          "en_US": "Button text color"
        },
        "default": "#fff"
      }, {
        "type": "card_color",
        "id": "btn_bg",
        "label": {
          "zh_CN": "按钮背景颜色",
          "en_US": "Button background color"
        },
        "default": "#000"
      }
    ],
    "default": {
      "settings": {
        "radius": 30,
        "title": "Play Video",
        "detail": "Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.",
        "btn_text": "Shop Now",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "video_url": {
          "value": "",
          "id": "",
          "model": ""
        },
        "video_image_mask": {
          "src": "",
          "alt": ""
        },
        "vedio_position": "right",
        "play_btn_text": "Play the video",
        "bg_color": "#fdf9ee",
        "text_color": "#000",
        "btn_color": "#fff",
        "btn_bg": "#000"
      },
      "blocks": []
    }
  }
{% endschema %}